<template>
	<view>
		<view>
			<cu-custom bgColor="bg-white" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">{{name}}</block>
			</cu-custom>
		</view>
		<view v-for="(item , index) in articleList" :key="index" @click="goDetails" :data-cid="item.cid" :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]">
			<view class="cu-card article">
				<view class="cu-item shadow">
					<view class="title">
						<view class="text-cut">{{item.title}}</view>
					</view>
					<view class="content">
						<image :src="item.thumb[0].str_value" mode="aspectFill"></image>
						<view class="desc">
							<view class="text-content"> {{item.description[0].str_value}}</view>
							<view>
								<view class="cu-tag bg-red light sm round"><text class="cuIcon-messagefill margin-lr-xs"></text> {{item.commentsNum}}</view>
								<view class="cu-tag bg-green light sm round"><text class="cuIcon-appreciatefill margin-lr-xs"></text>{{item.likes}}</view>
								<view class="cu-tag bg-green light sm round">
								<text class="cuIcon-attentionfill margin-lr-xs"></text> {{item.views}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var API = require('../../utils/api');
	var Net = require('../../utils/net');
	export default {
		data() {
			return {
				mid: "",
				name: "分类详情",
				categoriesList: [],
				articleList: []
			}
		},
		onLoad(res) {
			console.log(res)
			this.mid = res.mid;
			this.getCategoriesList()
		},
		methods: {
			getCategoriesList: function() {
				var that = this;
				var mid = this.mid;
				Net.request({
					url: API.GetPostsbyMID(mid),
					success: function(res) {
						console.log(res.data.data)
						that.articleList = res.data.data
					}
				})
			},
			goDetails: function(e) {
				uni.navigateTo({
					url: "/pages/details/details?cid=" + e.currentTarget.dataset.cid
				})
			},


		}
	}
</script>

<style>
	.shadow {
		box-shadow: 2upx 4upx 15upx #c2c2c2;
	}

</style>
